@charset "utf-8";
/* CSS Document */

.ease-chat{margin-top:15px;}
.ease-chat li{padding:0 8px; width:100%; height:auto; overflow:hidden; box-sizing:border-box; margin-bottom:20px;}
.ease-chat li .row{margin-left:72px; height:auto;}
.ease-chat li .row .l{float:left; width:72px; margin-left:-72px; margin-top:15px;}
.ease-chat li .row .l .avatar{width:40px; height:40px; border-radius:20px; margin:0 auto; background:url(images/default.png) no-repeat center center; background-size:cover;}
.ease-chat li .row span{display:block; width:100%; height:15px; line-height:15px; overflow:hidden; color:#999; text-align:left; font-size:12px; -webkit-transform:scale(0.75); transform:scale(0.75); -webkit-transform-origin:left; transform-origin:left;}
.ease-chat li .row .r{position:relative; float:left; max-width:100%; min-height:40px; height:auto; font-size:12px; text-align:left; background:#fff; border-radius:5px; border:1px solid #c8c8c8; padding:8px; box-sizing:border-box; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;}
.ease-chat li .row .r:before, .ease-chat li .row .r:after{content:""; position:absolute; z-index:1; left:-5px; top:15px; display:block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:5px solid #c8c8c8;}
.ease-chat li .row .r:after{left:-4px; top:16px; border-width:4px; border-right-color:#fff;}
@media all and (-webkit-transform-3d){
.ease-chat li .row .r{border:0.5px solid #c8c8c8;}
.ease-chat li .row .r:after{left:-4.5px; top:15.5px; border-width:4.5px;}
}
.ease-chat li .row .r img, .ease-chat li .row .r font{float:left; vertical-align:bottom;}
.ease-chat li .row .r a{display:block;}
.ease-chat li .row .r a img{float:none;}
.ease-chat li .row .r font{color:#bbb;}
.ease-chat li .row.reverse{margin-left:0; margin-right:72px;}
.ease-chat li .row.reverse .l{float:right; margin-left:0;  margin-right:-72px;}
.ease-chat li .row.reverse span{text-align:right; -webkit-transform-origin:right; transform-origin:right;}
.ease-chat li .row.reverse .r{float:right; background:#12b7f5; border:0.5px solid #0094cb;}
.ease-chat li .row.reverse .r:before, .ease-chat li .row.reverse .r:after{left:auto; right:-5px; border-left:5px solid #0094cb; border-right:none;}
.ease-chat li .row.reverse .r:after{right:-4px; border-left-color:#12b7f5;}

.ease-chat-overlay{position:fixed; z-index:998; top:0; left:0; width:100%; height:100%; display:none;}
.ease-chat-overlay.show{display:block;}

.ease-chat-toolbar{position:fixed; z-index:999; left:0; bottom:0; margin-top:0; width:100%; height:114px; overflow:hidden; background:#fff; -webkit-transform:translateY(70px); transform:translateY(70px); -webkit-transition:-webkit-transform 200ms ease-out; transition:transform 200ms ease-out;}
.ease-chat-toolbar.show{-webkit-transform:translateY(0); transform:translateY(0);}
.ease-chat-toolbar:before{content:""; display:block; position:absolute; z-index:15; left:0; top:0; width:100%; height:1px; background-color:#c4c4c4; -webkit-transform:scaleY(0.5); transform:scaleY(0.5); -webkit-transform-origin:top; transform-origin:top;}
/*.ease-chat-toolbar .view{margin-left:50px; margin-right:100px; height:44px;}*/
.ease-chat-toolbar .view{margin-left:50px; margin-right:124px; height:44px;}
.ease-chat-toolbar .view-web{margin-left:5px; margin-right:124px;}
.ease-chat-toolbar .view a{display:block; float:right; width:50px; height:44px; color:#fff; font-size:14px; background:no-repeat center center; background-size:30px 30px;}
.ease-chat-toolbar .view .audio{float:left; margin-left:-50px; background-image:url(images/chatBar_record@2x.png);}
.ease-chat-toolbar .view-web .audio{display:none;}
.ease-chat-toolbar .view .emoji{margin-right:-50px; display:none; background-image:url(images/chatBar_face@2x.png);}
.ease-chat-toolbar .view .send{margin-right:-74px; margin-top:5px; width:70px; height:34px; line-height:34px; background:#d00000; border-radius:3px;}
.ease-chat-toolbar .view .more{margin-right:-50px; background-image:url(images/chatBar_more@2x.png); -webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:-webkit-transform 500ms ease-out; transition:transform 500ms ease-out;}
.ease-chat-toolbar .view-web .more{margin-right:-124px;}
.ease-chat-toolbar .view .more.this{-webkit-transform:rotate(225deg); transform:rotate(225deg);}
.ease-chat-toolbar .view div{display:inline-block; width:100%; height:34px; text-align:left; margin-top:5px; border:1px solid #c4c4c4; border-radius:4px; padding:0 5px; box-sizing:border-box;}
@media all and (-webkit-transform-3d){
.ease-chat-toolbar .view div{border:0.5px solid #c4c4c4;}
}
.ease-chat-toolbar .view div input{width:100%; height:100%; font-size:13px; margin:0; background-color:transparent; border:none;}
.ease-chat-toolbar .area{height:70px; padding:10px; box-sizing:border-box; background:#f0f2f7;}
.ease-chat-toolbar .area a{display:block; float:left; width:50px; height:50px; margin-right:10px; background:no-repeat center center; background-size:100% 100%;}
.ease-chat-toolbar .area .image{position:relative; background-image:url(images/chatBar_colorMore_photo@2x.png);}
.ease-chat-toolbar .area .image input{position:absolute; z-index:9999; top:0; right:0; opacity:0; margin:0; width:50px; height:50px; font-size:50px; cursor:pointer;}
.ease-chat-toolbar .area .goods{background-image:url(images/chatBar_colorMore_goods@2x.png);}
